<template>
	<view class="p_b_128">
		<view class="p_rel">
			<swiper autoplay circular class="swiper_wrapper" @change="changeSwiper">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<image :src="item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			<view class="swiper_btn">{{currentNum}}/{{bannerList.length}}</view>
		</view>
		<view class="p_font_36 p_lr_32 p_margin_t_32">{{detailInfo.name}}</view>
		<view class="p_font_28 p_color_b2 p_lr_32 p_margin_t_8">{{detailDes}}</view>
		<view class="p_flex9 p_lr_32 p_margin_t_26">
			<view class="p_font_28 p_color_7a">{{detailInfo.download}}次打印</view>
			<view class="p_flex2">
				<button plain open-type="share" class="p_flex2 p_tb_8 p_margin_l_48">
					<image src="https://dy.sykj365.com/uploads/mini/fenxiang@2x.png" class="p_img_32 p_margin_r_8"></image>
					<view class="p_font_28 p_color_7a">分享</view>
				</button>
				<view class="p_flex2 p_tb_8 p_margin_l_48" @click="getCollect">
					<image src="https://dy.sykj365.com/uploads/mini/shoucang1@2x.png" class="p_img_32 p_margin_r_8"
						v-if="!detailInfo.collect"></image>
					<image src="https://dy.sykj365.com/uploads/mini/shoucang2@2x.png" class="p_img_32 p_margin_r_8" v-else></image>
					<view class="p_font_28 p_color_7a">{{detailInfo.collect?'已收藏': '收藏'}}</view>
				</view>
			</view>
		</view>
		<view class="p_lr_32 p_font_28 p_over">
			<view class="p_margin_b_32 p_margin_t_72">购买须知</view>
			<view class="p_color_7a p_margin_tb_32">一、17点前下单当天发货，默认发顺丰，满15元包邮，实际费用以最终结算为准。</view>
			<view class="p_color_7a p_margin_tb_32">二、因资料需求量大，统一使用标准设置打印，请您在确认后下单。</view>
		</view>
		<view class="p_lr_32 p_over">
			<view class="p_margin_b_32 p_margin_t_64 p_font_28">文件列表</view>
			<view class="p_margin_b_32 p_flex" v-for="item in filesList" :key="item.id">
				<image src="https://dy.sykj365.com/uploads/mini/file@2x.png" class="p_img_64 p_margin_r_16"></image>
				<view class="p_flex2 p_flex_2">
					<view class="p_flex_2">
						<view class="p_font_28">{{item.name}}</view>
						<view class="p_font_24 p_color_b2 p_margin_t_8">{{item.page}}页</view>
					</view>
					<view class="yulan p_font_26 p_color_7a" @click="preview(item.file)">预览</view>
				</view>
			</view>
		</view>
		<view class="p_lr_32 p_font_28 p_over">
			<view class="p_margin_b_32 p_margin_t_64">资料详情</view>
			<image :src="detailInfo.content" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="p_lr_32 p_font_28 p_over">
			<view class="p_margin_b_32 p_margin_t_96">购买流程</view>
			<image src="https://dy.sykj365.com/uploads/mini/goumailiucheng@2x.png" mode="widthFix" style="width: 100%;"
				class="p_margin_b_48"></image>
		</view>
		<!-- 底部 -->
		<view class="bottom_wrapper">
			<navigator url="/pages/index/printList" hover-class="none" class="p_img_84 listAll">
				<image src="https://dy.sykj365.com/uploads/mini/gouwuche@2x.png" class="p_full"></image>
				<view>{{allNum}}</view>
			</navigator>
			<view class="p_btn" @click="getAdd">
				<view>添加到待打印</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentNum: 1, // 轮播图当前播放index
				id: '',
				detailInfo: {},
				bannerList: [],
				detailDes: '',
				filesList: [],
				allNum: 0,
				collect: '',
			}
		},
		onLoad(e) {
			this.id = e.id;
			this.getDetail();
			this.getCartNum(); // 打印列表数量

			if (e.collect) this.collect = e.collect;
		},
		onShareAppMessage(res) {
			let self = this;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: self.detailInfo.name,
				path: '/pages/dataBank/detail?id=' + self.id
			}
		},
		methods: {
			getCartNum() {
				this.$http.post(this.$api.cartNum, {}, false, true).then(res => {
					this.allNum = res.data;
				})
			},
			getDetail() {
				this.$http.post(this.$api.infoDetail, {
					id: this.id
				}, false, true).then(res => {
					this.detailInfo = res.data;
					this.bannerList = res.data.images;
					this.filesList = res.data.file;

					let arr = [res.data.paper, res.data.colour, getD(res.data.single_double), getT(res.data
						.binding_type), res.data.file_num + '个文件'];
					this.detailDes = arr.join('/');

					function getD(e) {
						if (e == 0) return '单面';
						if (e == 1) return '双面';
						if (e == '') return '';
					}

					function getT(e) {
						let s = '';
						switch (e) {
							case '0':
								s = '不装订';
								break;
							case '1':
								s = '订书钉';
								break;
							case '2':
								s = '圈装';
								break;
							case '3':
								s = '胶装皮纹纸';
								break;
							case '4':
								s = '胶装铜版纸';
								break;
						}
						return s;
					}
				})
			},
			changeSwiper(e) {
				this.currentNum = e.detail.current + 1;
			},
			preview(e) {
				getApp().getSeeFile(e);
			},
			getAdd() {
				this.$http.post(this.$api.addCart, {
					id: this.id
				}).then(res => {
					getApp().getMsg('加入成功');
					this.getCartNum();
				})
			},
			getCollect() {
				if (this.detailInfo.collect) {
					// this.$http.post(this.$api.cancelCollect, {
					// 	ids: this.id
					// }).then(res => {
					// 	this.getSuccess('已取消收藏');
					// })
				} else {
					this.$http.post(this.$api.userCollect, {
						information_id: this.id
					}).then(res => {
						this.getSuccess('收藏成功');
					})
				}
			},
			getSuccess(e) {
				getApp().getMsg(e);
				this.getDetail();

				if (this.collect) {
					uni.setStorageSync('isCollectList', true);
				}
			}
		}
	}
</script>

<style lang="less">
	.swiper_wrapper {
		height: 500rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.swiper_btn {
		bottom: 20rpx;
		right: 32rpx;
		position: absolute;
		border-radius: 80rpx;
		background: rgba(0, 0, 0, 0.2);
		font-size: 24rpx;
		line-height: 44rpx;
		padding: 0 24rpx;
		color: #fff;
	}

	.yulan {
		width: 100rpx;
		height: 52rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 1px solid #E8E8E8;
		border-radius: 80rpx;
		margin-left: 46rpx;
	}

	.bottom_wrapper {
		position: fixed;
		bottom: 0;
		width: 100%;
		overflow: hidden;
		background-color: #fff;
		height: 128rpx;
		box-sizing: border-box;
		border-top: 1px solid #f3f3f3;
		display: flex;
		justify-content: space-between;

		.p_btn {
			width: 264rpx;
			margin-left: 0;
			margin-right: 32rpx;
		}
	}

	.listAll {
		margin: 12rpx 0 0 32rpx;
		position: relative;

		view {
			color: #fff;
			font-size: 20rpx;
			line-height: 32rpx;
			min-width: 20rpx;
			padding: 0 6rpx;
			text-align: center;
			border-radius: 40rpx;
			background-color: #FF5555;
			position: absolute;
			top: 0;
			right: 0;
		}
	}
</style>